<template>
  <div class="page">
    <div class="lists" ref="lists">
      <div v-if="reviewOrders.length>0">
        <div class='order-list' v-for="(item, index) in reviewOrders" :key="index">
          <div class='ordernum-wrap' @click="$router.push({name:'order-details',query: {ordernum: item.ordernum}})">
            <div class='ordernum'>订单编号：{{item.ordernum}}</div>
            <div class='status'>{{item.status === '0' ? '待付款' : item.status === '1' ? '待收货' : '已收货' }}</div>
          </div>
          <div class='item-list' v-for="(item2, index2) in item.goods" :key="index2"
               @click="$router.push({name:'goods-detail',query:{gid:item2.gid}})">
            <div class='image'><img v-lazy="item2.image" alt=""/></div>
            <div class='title'>{{item2.title}}</div>
            <div class='amount'>x {{item2.amount}}</div>
            <div v-if="item2.isreview === '0'" class='status-btn'
                 @click.stop="$router.push({name: 'add-review',query: {gid: item2.gid, ordernum: item.ordernum}})">评价
            </div>
            <div v-else class='status-btn'
                 @click.stop="$router.push({name: 'add-review',query: {gid: item2.gid, ordernum: item.ordernum}})">追加评价
            </div>
          </div>
        </div>
      </div>
      <div v-else class="no-data">没有相关订单</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import BScroll from 'better-scroll'

export default {
  name: 'order-reivew',
  methods: {
    ...mapActions({
      getReviewOrder: 'order/getReviewOrder'
    }),
    initScroll () {
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      this.$refs.lists.style.height = windowHeight - this.$refs.lists.offsetTop + 'px'
      this.$refs.lists.style.overflow = 'hidden'
      this.scroll = new BScroll(this.$refs.lists, {
        click: true,
        scrollY: true,
        pullUpLoad: true
      })
      this.scroll.on('pullingUp', async () => {
        this.page++
        let res = await this.getReviewOrder({ page: this.page })
        if (res.code === 200) {
          this.$nextTick(() => {
            this.scroll.refresh()
            this.scroll.finishPullUp()
          })
        } else {
          this.$toast('没有更多订单了')
        }
      })
    },
    async initData () {
      this.page = 1
      let res = await this.getReviewOrder({ page: this.page })
      if (res.code === 200) {
        this.$nextTick(() => {
          this.initScroll()
        })
      }
    }
  },
  computed: {
    ...mapState({
      reviewOrders: state => state.order.reviewOrders
    }),
  },
  created () {
    this.initData()
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    this.scroll.scrollTo(0, 0)
    this.scroll.destroy()
    this.page = 1
    this.scroll = null
  }
}
</script>

<style scoped>
  .page {
    background: #fff;
  }

  .no-data {
    padding: .3rem;
    font-size: .28rem;
    text-align: center;
  }

  .order-list {
    width: 100%;
    height: auto;
  }

  .order-list .ordernum-wrap {
    width: 96%;
    height: 0.8rem;
    border-bottom: #EFEFEF 1px solid;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
    align-items: center;
    -webkit-align-items: center;
  }

  .order-list .ordernum-wrap .ordernum, .order-list .ordernum-wrap .status {
    width: auto;
    height: auto;
    font-size: 0.28rem;
  }

  .item-list {
    width: 100%;
    height: 2.4rem;
    border-bottom: #EFEFEF 1px solid;
    position: relative;
    z-index: 1;
  }

  .item-list .image {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    z-index: 1;
    left: 2%;
    top: 0.2rem;
  }

  .item-list .image img {
    width: 100%;
    height: 100%;
  }

  .item-list .title {
    width: 72%;
    height: auto;
    font-size: 0.28rem;
    position: absolute;
    z-index: 1;
    left: 22%;
    top: 0.2rem;
  }

  .item-list .amount {
    width: auto;
    height: auto;
    position: absolute;
    z-index: 1;
    right: 2%;
    bottom: 0.8rem;
    font-size: 0.24rem;
    color: #909090;
  }

  .item-list .status-btn {
    font-size: 0.24rem;
    width: 1.24rem;
    height: 0.52rem;
    line-height: 0.52rem;
    text-align: center;
    border: 1px solid #f15353;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    right: 2%;
    bottom: 0.2rem;
  }

  .total-wrap {
    width: 96%;
    height: 0.8rem;
    border-bottom: 1px solid #F17F1F;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
  }

  .total-wrap .total {
    font-size: 0.28rem;
  }
</style>
